<template>
  <div class="pifajia1">
    <div class="left">
      <a-menu
        mode="inline"
        :open-keys="openKeys"
        style="width: 200px"
        @openChange="onOpenChange"
      >
        <a-sub-menu key="sub1">
          <span slot="title"><a-icon type="search" /><span>算例</span></span>
          <a-menu-item key="1" @click="menuCheck=1"> 算例 1 </a-menu-item>
          <a-menu-item key="2" @click="menuCheck=2"> 算例 2 </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </div>
    <div class="right" v-if="menuCheck===1">
      <div class="description">
        <h3>问题描述:</h3>
        <p>
            设零售商的单位价格为p=w+m，其中m为零售商的利润。供应商和零售商这两个参与者都想最大化他们的利润-边际乘以需求，分别表示为J<sub>s</sub>(w)=(w-c)q(w+m)和J<sub>r</sub>(p)=mq(w+m)。
        </p>
        <p>
          设需求是价格的非线性，q(p)=a-bp<sup>α</sup> ，0&lt;α&lt;1 一阶导数的需求要求是满足关键函数的  
        </p>
      </div>
      <div class="parameter">
        <h3>参数:</h3>
        <div class="pictures">
        </div>
        <div class="dataNum" style="margin: 0 200px;">
          <span>α= <a-input v-model="α" /></span>
          <span>a= <a-input v-model="a" /></span>
          <span>b=<a-input v-model="b" /></span>
          <span>c=<a-input v-model="c" /></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
            <img src="/imgs/example/静态博弈1.png" alt="" />
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
            <a-card style="width: 480px" v-for="item,index in picArr" :key="index" >
                <img
                slot="cover"
                alt="example"
                :src="item"
                />
                <a-card-meta :title="`w*:${res1.wstar.toFixed(2)}`">
                </a-card-meta>
                <a-card-meta :title="`m*:${res1.mstar.toFixed(2)}`">
                </a-card-meta>
            </a-card>
      </div>
    </div>
    <div class="right" v-else>
      <div class="description">
        <h3>问题描述:</h3>
        <p>
            考虑横向生产竞争的影响。两个制造商生产相同或可替代类型的产品。产品的特征是关于总需求的内生价格函数Q=q<sub>1</sub> +q<sub>2</sub>, p=p(Q)，由于产品完全可替代，因此q<sub>1</sub>和q<sub>2</sub>是对称的。设价格p与生产数量L成指数关系 
        </p>
        <p>
          
        </p>
      </div>
      <div class="parameter">
        <h3>参数:</h3>
        <div class="pictures">
        </div>
        <div class="dataNum" style="margin: 0 250px;">
          <span>a= <a-input v-model="a1" /></span>
          <span>b=<a-input v-model="b1" /></span>
          <span>c=<a-input v-model="c1" /></span>
        </div>
      </div>
      <div class="functions">
        <h3>关键函数：</h3>
            <img src="/imgs/example/静态博弈2.png" alt="" />
      </div>
      <div class="compute">
        <div class="button">
          <a-button type="primary" @click="compute2"> 计算 </a-button>
        </div>
      </div>
      <div class="result">
            <a-card style="width: 480px" v-for="item,index in picArr" :key="index" >
                <img
                slot="cover"
                alt="example"
                :src="item"
                />
                <a-card-meta :title="`qn:${res2.qn.toFixed(2)}`">
                </a-card-meta>
            </a-card>
      </div>
    </div>
  </div>
</template>

<script>
import {URL} from '../../api/api.js'
export default {
  data() {
    return {
      URL:URL,
      rootSubmenuKeys: ["sub1", "sub2", "sub4"],
      openKeys: ["sub1"],
      α: 0.5,
      a: 15,
      b: 2,
      c: 1,
      a1:15,
      b1:0.1,
      c1:1,
      picArr: [],
      menuCheck:1,
      res1:{},
      res2:{},
    };
  },
  mounted() {
      this.α = this.$store.state.ExampleData[0].params[3].default_value
      this.a = this.$store.state.ExampleData[0].params[0].default_value
      this.b = this.$store.state.ExampleData[0].params[1].default_value
      this.c = this.$store.state.ExampleData[0].params[2].default_value
      this.a1 = this.$store.state.ExampleData[1].params[0].default_value
      this.b1 = this.$store.state.ExampleData[1].params[1].default_value
      this.c1 = this.$store.state.ExampleData[1].params[2].default_value
  },
  methods: {
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        (key) => this.openKeys.indexOf(key) === -1
      );
      if (this.rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
    },
    compute() {
      this.axios
        .post("/course/calc_example/", {
          example_key: this.$store.state.ExampleKey,
          param: {
            alpha: this.α,
            a: this.a,
            b: this.b,
            c: this.c,
          },
        })
        .then((res) => {
          console.log(res);
          this.res1= res
          this.picArr = res.urls.map(
            (item) => this.URL+'/' + item
          );
        });
    },
    compute2() {
      this.axios
        .post("/course/calc_example/", {
          example_key: this.$store.state.ExampleData[1].key,
          param: {
            a: this.a1,
            b: this.b1,
            c: this.c1,
          },
        })
        .then((res) => {
          console.log(res);
          this.res2= res
          this.picArr = res.urls.map(
            (item) => this.URL+'/' + item
          );
        });
    },
  },
};
</script>

<style lang="scss">
.pifajia1 {
  display: flex;
  .right {
    // background-color: skyblue;
    flex: 1;
    .description {
      padding: 0px 20px 0 20px;
      span {
        display: block;
        margin-bottom: 10px;
      }
    }
    .parameter {
      padding: 0 20px 20px 20px;
      span {
        display: inline-block;
        margin-bottom: 10px;
      }
      .pictures {
        margin-bottom: 10px;
      }
      .dataNum {
        display: flex;
        justify-content: space-between;
      }
      .ant-input {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
        font-variant: tabular-nums;
        list-style: none;
        font-feature-settings: "tnum";
        position: relative;
        display: inline-block;
        width: 80px;
        height: 32px;
        padding: 4px 11px;
        color: rgba(0, 0, 0, 0.65);
        font-size: 14px;
        line-height: 1.5;
        background-color: #fff;
        background-image: none;
        border: 1px solid #d9d9d9;
        border-radius: 4px;
        transition: all 0.3s;
      }
    }
    .functions {
      padding: 0 20px 20px 20px;
    }
    .compute {
      padding-right: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
      border-bottom: 1px solid #ccc;
      .button {
        margin-bottom: 10px;
      }
    }
    .result{
        margin-top: 20px;
        .ant-card-meta-title {
            overflow: hidden;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            font-size: 16px;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align: center;
        }
    }
  }
}
</style>